<template>
	<view class="container">
		<nav-bars class="i_top" bgColor="#fff" fontColor="#000" backState="1000">
			<view class="i_tCan" slot="default">
				<view class="i_tInput">
					<view class="i_tIcon iconfont icon-search"></view>
					<input type="text" confirm-type="search" v-model="keyword" @confirm="searchData" placeholder="搜索订单信息"
						placeholder-class="placeholder" />
				</view>
			</view>
		</nav-bars>
		<view class="nar-bar">
			<!-- 导航栏 -->
			<view class="tabs">
				<u-tabs name="cate_name" count="cate_count" :list="list" :is-scroll="false" :current="current"
					@change="change" bg-color="rgba(0,0,0,0)" active-color="#333" inactive-color="#606266"
					bar-width="60"></u-tabs>
			</view>
		</view>
		<view class="listx" v-if="orderList.length">
			<scroll-view class="s_dList" scroll-y @scrolltolower="scrolldata">
				<view class="content" v-for="(item,index) in orderList" :key="index">
					<!-- 申诉单 -->
					<view class="detail" v-if="current==5">
						<view class="detail-content">
							<view class="product df-bt">
								<view class="product-info df-ct" @click="toDetail(item)">
									<image :src="item.avatar.path" mode="" class="product-img"></image>
									<view class="name">
										<view class="name-top">{{item.partner_name}}</view>
										<view class="phone">{{item.partner_phone}}</view>
									</view>
								</view>
								<!-- <view class="g_icon iconfont iconhuaban74" @tap.stop="callPhone(item.designer_phone)"> -->
								<view class="tag">
									<text class="platform" v-if="item.is_platform==1">平台介入</text>
									<text>{{appealStatus[item.status]}}</text>
								</view>
							</view>
							<view class="top df-bt">
								<view class="appeal">订单编号：{{item.order_no}}</view>
								<view class="appeal">申诉类型：{{item.appeal_type}}</view>
								<view class="appeal">
									备注内容：
									<view class="imgBox">
										<text>{{item.appeal_desc}}</text>
									</view>
								</view>
							</view>
							<view class="btn-box clearfix">
								<view>
									<view class="price-box">
										<text class="all-price">合同金额 ¥ {{item.order_amount}} </text>
									</view>
									<!-- <view class="price-box" v-if="item.is_many_way==1">
										<text class="all-price">已付定金 ¥ {{item.deposit_price}} </text>
										<text class="d-price">已付尾款 ¥{{item.balance_price}}</text>
									</view> -->
									<view class="btn">
										<text class="btn-text ssActive" @tap="callPhone(item.partner_phone)">联系设计师</text>
										<text class="btn-text ssActive" v-if="item.is_platform==0 && item.status!=3 && item.status!=2" @tap="toIntervene(item.id)">平台介入</text>
										<text class="btn-text ssActive" @tap="appealDetail(item.id,item.order_id)">查看详情</text>
										<text class="btn-text ssActive" v-if="item.status!=3 && item.status!=2" @click="toWithdraw(item.id)">撤回申诉</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 正常单 -->
					<view class="detail" v-else>
						<view class="detail-content">
							<view class="is_back" v-if="item.is_back==1">已回退</view>
							<view class="product df-bt">
								<view class="product-info df-ct" @click="toDetail(item)">
									<image :src="item.avatar.path" mode="" class="product-img"></image>
									<view class="name">
										<view class="name-top">{{item.designer_name}}</view>
										<view class="phone">{{item.designer_phone}}</view>
									</view>
								</view>
								<view class="g_icon iconfont iconhuaban74" @tap.stop="callPhone(item.designer_phone)">
								</view>
							</view>
							<view class="top df-bt" v-if="item.status==0">
								<view class="left">
									<view class="t">下单时间</view>
									<view>{{item.create_time |formatDates}}</view>
								</view>
								<view class="right">
									<view class="tr">订单编号</view>
									<view>{{item.order_no}}</view>
								</view>
							</view>
							<view class="top" v-else>
								<view class="size df-bt gg">
									<view class="">
										<view class="t">户型</view>
										<view>{{item.house_type}}</view>
									</view>
									<view class="" style="text-align: center;">
										<view class="t">面积</view>
										<view>{{item.house_area}}m²</view>
									</view>
									<view class="right">
										<view class="t">小区</view>
										<view>{{item.estate}}</view>
									</view>
								</view>
								<view class="time df-bt">
									<view class="left">
										<view class="t">下单时间</view>
										<view>{{item.create_time | formatDates}}</view>
									</view>
									<view class="right">
										<view class="tr">订单编号</view>
										<view>{{item.order_no}}</view>
									</view>
								</view>
							</view>

							<view class="btn-box clearfix">
								<view v-if="item.status==1">
									<view class="btn">

										<text class="btn-text" @tap="handleDelivery(item.id)">查看详情</text>
										<!-- #ifndef MP-WEIXIN -->
										<text class="btn-text" @click="toCustomer(item.designer_id)">联系客服</text>
										<!-- #endif -->
										<!-- #ifdef MP-WEIXIN -->
										<text class="btn-text" v-if="!item.config_id && !item.config_url" @click="toCustomer(item.designer_id)">联系客服</text>
										<text class="btn-text" v-else @click="gitpouchatshow(item.config_id,item.config_url)">联系客服</text>
										<!-- #endif -->
										<text class="btn-text" @tap="handleModal(item.id)">取消订单</text>
									</view>
								</view>
								<view v-if="item.status==2">
									<view class="btn">
										<text class="btn-text" @tap="handleDelivery(item.id)">查看详情</text>
										<!-- #ifndef MP-WEIXIN -->
										<text class="btn-text" @click="toCustomer(item.designer_id)">联系客服</text>
										<!-- #endif -->
										<!-- #ifdef MP-WEIXIN -->
										<text class="btn-text" v-if="!item.config_id && !item.config_url" @click="toCustomer(item.designer_id)">联系客服</text>
										<text class="btn-text" v-else @click="gitpouchatshow(item.config_id,item.config_url)">联系客服</text>
										<!-- #endif -->
										<text class="btn-text" @click=" handleModal(item.id)">取消订单</text>
									</view>
									<u-modal v-model="show2" :content="sentContent" show-cancel-button="true"></u-modal>
								</view>
								<view v-if="item.status==3">
									<view class="price-box">
										<text class="all-price">合同金额 ¥ {{item.contract_price}} </text>
										<!-- <text class="d-price" v-if="item.is_many_way==1">待付定金 ¥ {{item.deposit_price}}</text> -->
									</view>
									<view class="btn">
										<text class="btn-text" @tap="handleModal(item.id)">取消订单</text>
										<!-- #ifndef MP-WEIXIN -->
										<text class="btn-text" @click="toCustomer(item.designer_id)">联系客服</text>
										<!-- #endif -->
										<!-- #ifdef MP-WEIXIN -->
										<text class="btn-text" v-if="!item.config_id && !item.config_url" @click="toCustomer(item.designer_id)">联系客服</text>
										<text class="btn-text" v-else @click="gitpouchatshow(item.config_id,item.config_url)">联系客服</text>
										<!-- #endif -->
										<text class="btn-text" @tap="handleDelivery(item.id)">查看详情</text>
										<!-- <text class="btn-text active" @tap="payModel(item.order_no,item.id)">付款</text> -->
									</view>
								</view>
								<view v-if="item.status==4">
									<view class="price-box">
										<text class="all-price">合同金额 ¥ {{item.contract_price}} </text>
									</view>
									<!-- <view class="price-box" v-if="item.is_many_way==1">
										<text class="all-price">已付定金 ¥ {{item.deposit_price}} </text>
										<text class="d-price">待付尾款 ¥{{item.balance_price}}</text>
									</view> -->
									<view class="btn">
										<text class="btn-text" @tap="toBackOrder(item.id)">回退</text>
										<text class="btn-text" @tap="handleDelivery(item.id)">查看详情</text>
										<!-- #ifndef MP-WEIXIN -->
										<text class="btn-text" @click="toCustomer(item.designer_id)">联系客服</text>
										<!-- #endif -->
										<!-- #ifdef MP-WEIXIN -->
										<text class="btn-text" v-if="!item.config_id && !item.config_url" @click="toCustomer(item.designer_id)">联系客服</text>
										<text class="btn-text" v-else @click="gitpouchatshow(item.config_id,item.config_url)">联系客服</text>
										<!-- #endif -->
										<text class="btn-text active" v-if="item.pay_status==1" @tap="toConfirm(item.id)">确认完工</text>
										<!-- <text class="btn-text active" v-if="item.is_many_way==1"
											 @tap="payModel(item.order_no,item.id)">付款</text> -->
									</view>
									<!-- <u-modal v-model="show3" :content="sureContent" show-cancel-button="true"></u-modal> -->
								</view>
								<view v-if="item.status==5">
									<view class="price-box">
										<text class="all-price">合同金额 ¥ {{item.contract_price}} </text>
									</view>
									<!-- <view class="price-box" v-if="item.is_many_way==1">
										<text class="all-price">已付定金 ¥ {{item.deposit_price}} </text>
										<text class="d-price">已付尾款 ¥{{item.balance_price}}</text>
									</view> -->
									<view class="btn">
										<text class="btn-text" v-if="item.is_appeal==0" @tap="toAppealAdd(item)">申诉</text>
										<text class="btn-text" @tap="handleDelivery(item.id)">查看详情</text>
										<!-- #ifndef MP-WEIXIN -->
										<text class="btn-text" @click="toCustomer(item.designer_id)">联系客服</text>
										<!-- #endif -->
										<!-- #ifdef MP-WEIXIN -->
										<text class="btn-text" v-if="!item.config_id && !item.config_url" @click="toCustomer(item.designer_id)">联系客服</text>
										<text class="btn-text" v-else @click="gitpouchatshow(item.config_id,item.config_url)">联系客服</text>
										<!-- #endif -->
										<text class="btn-text active" v-if="item.is_comment==0" @click="toEvaluate(item)">立即评价</text>
									</view>
								</view>
								<!-- <view v-if="item.status==6">
						<view class="price-box" v-if="item.is_many_way==1">
							<text class="all-price">已付定金 ¥ {{item.deposit_price}} </text>
							<text class="d-price">已付尾款 ¥ {{item.balance_price}}</text>
						</view>
						<view class="btn">
							<text class="btn-text" @tap="handleDelivery(item.id)">查看详情</text>
							<text class="btn-text" @click="toCustomer(item.designer_id)">联系客服</text>
						</view>
						
					</view> -->
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 空空如也 -->
		<view class="notList" v-else>
			<image :src="`${baseimg}/static/constr/notList.png`" mode=""></image>
			空空如也
		</view>
		<!-- 二维码 -->
		<view class="qrcodepop" :style="showModal?'':'display:none;'">
			<view class="qrcodecont">
				<view class="qrname">
					<view>核销二维码</view>
					<view><canvas canvas-id="myQrcode"></canvas></view>
				</view>
				<view class="iconfont icon-close" @click="handleHideCodeClick"></view>
			</view>
		</view>
		
		
		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
		  <view class="poucont">	
			<view class="chatlist">
				<view class="chatml" @click="gitwxchat()" v-if="config_url">
					<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
					<text class="t1">在线微信客服</text>
					<text class="t2">可直接联系客服</text>
				</view>
				<view class="chatml" v-if="config_id">
					<cell class="cell-service" bind:startmessage='startmessage' bind:completemessage="completemessage" :plugid="config_id"/>
					<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
					<text class="t1">添加微信客服</text>
					<text class="t2">扫微信二维码</text>
				</view>
			</view>
			<view class="iconfont icon-close" @click="wxCodeClick"></view>
		  </view>	
		</view>
	</view>
</template>

<script>
	import service_design from '@/service/design'
	import service_mall from '@/service/mall.js'
	const qrCode = require('@/utils/weapp-qrcode.js')
	export default {
		components: {
		 // #ifdef MP-WEIXIN
		 			"cell": "plugin://contactPlugin/cell",
		 // #endif 
		 },
		data() {
			return {
				list: [{
						cate_name: '待接单'
					}, {
						cate_name: '待处理'
					}, {
						cate_name: '待付款',
					},
					{
						cate_name: '待设计'
					}, {
						cate_name: '已完成'
					},{
						cate_name: '申诉单'
					},
				],
				// 申述订单状态
				appealStatus:{
					0: "待处理",
					1: "处理中",
					2: "已解决",
					3: "已撤回"
				},
				current: 0,
				baseimg: this.$static,
				content: '确定要关闭此订单吗',
				sentContent: '确定发送给客户吗',
				// sureContent:'确定完成吗',
				deleteContent: '确定删除吗',
				show: false,
				show2: false,
				// show3:false,
				show4: false,
				orderList: [],
				page: 1,
				pagesize: 10,
				order_id: null, //订单id
				code: '',
				showModal: false,
				tapIndex: '',
				terminal: "",
				scrollTop: 0,
				keyword:'',
				config_id:'',
				config_url:'',
				pouchatshow:false,
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// if (e.scrollTop >= 100) {
			// 	this.titleText = '案例详情'
			// } else {
			// 	this.titleText = ''
			// }
		},
		onShow() {
			this.page = 1
			this.orderList = []
			if(this.current==5){
				this.getAppealList()
			}else{
				this.getOrderList()
			}
		},
		onLoad() {
			this.$utils.getUrl()
			//#ifdef MP-WEIXIN
			this.terminal = "wxapplet";
			//#endif
		},
		filters: {
			formatDates(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y + "/" + m + "/" + d + " " + h + ":" + minute + ":" + second;
			},
			formatDate(value) {
				var date = new Date(value);
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "/" + month + "/" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
		},
		methods: {
			
			gitpouchatshow(config_id,config_url){
				this.config_id = config_id,
				this.config_url = config_url,
				this.pouchatshow = true
			},
			wxCodeClick(){
				this.config_id = '',
				this.config_url = '',
				this.pouchatshow = false
			},
			gitwxchat(){
				wx.openCustomerServiceChat({
				  extInfo: {url: this.config_url},
				  corpId: this.$env.CORPID,
				  success(res) {}
				})
			},
			// 获取订单列表
			getOrderList() {
				let params = {
					keyword: this.keyword,
					status: this.current + 1,
					page: this.page,
					pagesize: this.pagesize,
				}
				service_design.getorderlist(params).then(res => {
					if (res.code == 1) {
						for (var i = 0; i < res.data.length; i++) {
							this.orderList.push(res.data[i]); // 加载的数据追加在上一页后面
						}
					}
				})
			},
			// 获取申述列表
			getAppealList(){
				let params = {
					page:this.page,
					pagesize:this.pagesize
				}
				service_design.getAppealList(params).then(res=>{
					console.log(res,'申述列表')
					if(res.code==1){
						for (var i = 0; i < res.data.length; i++) {
							this.orderList.push(res.data[i]); // 加载的数据追加在上一页后面
						}
						console.log(this.orderList,'---')
					}
				})
			},
			
			toCustomer(id) {
				uni.navigateTo({
					url: "/pages_customer/pages/index?partner_type=designer&partner_id=" + id
				})
			},
			scrolldata() {
				this.page++
				if(this.current==5){
					this.getAppealList()
				}else{
					this.getOrderList()
				}
			},
			searchData() {
				this.page = 1
				this.orderList = []
				this.getOrderList()
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 跳转设计师详情页面
			toDetail(item) {
				if(item.designer_id){
					uni.navigateTo({
						url: '/pages_design/pages/design/personal/personal?designerId=' + item.designer_id
					})
				}else{
					uni.navigateTo({
						url:'/pages_decoration/pages/decoration/detailes/index?decorationId=' + item.decoration_id
					})
				}
			},
			
			// 申述订单跳转详情
			appealDetail(id,order_id){
				uni.navigateTo({
					url: '/pages_design/pages/design/order/detail?orderid=' + order_id + '&appeal_id=' + id
				})
			},
			
			// 平台介入按钮
			toIntervene(id){
				uni.showModal({
					title:'确定平台介入该申诉吗？',
					success:res=>{
						if(res.confirm){
							let params = {
								appeal_id:id
							}
							service_design.toIntervene(params).then(res=>{
								if(res.code==1){
									uni.showToast({
										title:'平台介入成功',
										icon:'success'
									})
									this.orderList = []
									this.getAppealList()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 撤回申诉按钮
			toWithdraw(id){
				uni.showModal({
					title:'确定撤回该申诉吗？',
					success:res=>{
						if(res.confirm){
							let params = {
								appeal_id:id
							}
							service_design.toWithdraw(params).then(res=>{
								if(res.code==1){
									uni.showToast({
										title:'撤回成功',
										icon:'success'
									})
									this.orderList = []
									this.getAppealList()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 申诉按钮
			toAppealAdd(item){
				let params = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url:'/pages_decoration/pages/appealAdd/add?data='+params+'&orderType=desginer'
				})
			},
			
			// 确认完工按钮
			toConfirm(id){
				let that = this
				uni.showModal({
					content:'是否确定满意完工？',
					success:res=>{
						if(res.confirm){
							service_design.confirmOrder({order_id:id}).then(res=>{
								console.log(res,'确定完工')
								if(res.code==1){
									uni.showToast({
										title:'已确定完工',
										icon:'success'
									})
									setTimeout(function(){
										that.page=1
										that.orderList = []
										that.getOrderList()
									},300)
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 立即评价按钮
			toEvaluate(item){
				console.log(item,1111)
				if(item.designer_id){
					uni.navigateTo({
						url: '/pages_design/pages/design/evaluate/add?designerId=' + item.designer_id + '&decorationId=' + item.decoration_id + '&name=' + item.designer_name + '&orderId=' + item.id
					})
				}else{
					uni.navigateTo({
						url: '/pages_design/pages/design/evaluate/add?designerId=' + item.designer_id + '&decorationId=' + item.decoration_id + '&name=' + item.designer_name + '&orderId=' + item.id
					})
				}
			},

			// toBack() {
			//   	uni.navigateBack({
			//   	    delta: 1
			//   	});
			// },
			// 回退
			toBackOrder(id) {
				uni.showModal({
					content: '确定回退该订单吗？',
					success: res => {
						if (res.confirm) {
							let params = {
								order_id: id,
								is_back: 1
							}
							service_design.toBackOrder(params).then(res => {
								console.log(res, '回退结果')
								if (res.code == 1) {
									uni.showToast({
										title: '回退成功',
										icon: 'success'
									})
									setTimeout(function() {
										this.getOrderList()
									}, 500)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})

			},
			change(index) {
				this.current = index;
				this.page = 1
				this.orderList = []
				if(index==5){
					this.getAppealList()
				}else{
					this.getOrderList()
				}
			},
			// 选择支付方式
			payModel(order_code, id) {
				let itemList = ["微信支付", "线下支付"]
				this.itemList = itemList
				uni.showActionSheet({
					itemList: this.itemList,
					success: (t) => {
						this.tapIndex = t.tapIndex + 1
						this.getpayorder(order_code, id)
					}
				});
			},
			initQrCode: function() {
				new qrCode('myQrcode', {
					text: this.code,
					width: 160,
					height: 160,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			},
			handleShowCodeClick: function() {
				this.showModal = true
				this.$nextTick(function() {
					this.initQrCode()
				})
			},
			handleHideCodeClick: function() {
				this.showModal = false
			},
			getpayorder(order_code, id) {
				service_mall.getpay({
					order_no: order_code,
					type: 'designer_order',
					pay_type: this.tapIndex
				}).then(res => {
					if (res.code == 1) {
						let data = res.data
						if (this.tapIndex == 1) {
							if (this.terminal == 'wxapplet') {
								uni.requestPayment({
									appId: res.data.appId,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									paySign: res.data.paySign,
									signType: res.data.signType,
									timeStamp: res.data.timeStamp,
									success: (suc) => {
										uni.navigateTo({
											url: "/pages_design/pages/design/order/sucess?type=1" +
												'&orderid=' + id
										})
									},
									fail: (err) => {
										uni.navigateTo({
											url: "/pages_design/pages/design/order/sucess?type=0" +
												'&orderid=' + id
										})
									}
								});
							} else {
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: {
										"appid": res.data.appid,
										"partnerid": res.data.partnerid,
										"prepayid": res.data.prepayid,
										"noncestr": res.data.noncestr,
										"package": res.data.package,
										"timestamp": res.data.timestamp,
										"sign": res.data.sign,
									},
									success: (suc) => {
										uni.navigateTo({
											url: "/pages_design/pages/design/order/sucess?type=1" +
												'&orderid=' + id
										})
									},
									fail: (err) => {
										console.log(err, 12345)
										uni.navigateTo({
											url: "/pages_design/pages/design/order/sucess?type=0" +
												'&orderid=' + id
										})
									}
								});
							}
						} else {
							this.code = res.data.verificationCode
							this.handleShowCodeClick()
						}

					} else {
						this.failMsg(res)
					}
				})
			},
			// 关闭订单
			handleModal(id) {
				let that = this
				uni.showModal({
					title: "提示！",
					content: "是否取消该订单",
					success: function(i) {
						if (i.confirm) {
							service_design.getordercancel({
								order_id: id
							}).then(res => {
								if (res.code == 1) {
									that.page = 1
									that.orderList = []
									that.getOrderList()

								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				});

			},
			handleDelivery(id) {
				uni.navigateTo({
					url: '/pages_design/pages/design/order/detail?orderid=' + id
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100vh;
		// 导航栏
		.s_navBar {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;

			.s_nCenter {
				width: 100%;
			}

			.s_nBg {
				width: 100vw;
				background: rgba(255, 255, 255, 0.1);
				position: fixed;
				top: 0;
				left: 0;
				z-index: -1;
				filter: blur(1px);
			}

			.s_nInput {
				color: #939393;
				width: 400rpx;
				height: 66rpx;
				border: 2rpx solid rgba(255, 255, 255, 0.5);
				background: rgba(255, 255, 255, 0.1);
				padding: 0 64rpx;
				border-radius: 36rpx;
				position: relative;

				&>input {
					height: 100%;
					font-size: 24rpx;
				}
			}

			.s_nIcon {
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 28rpx;
				position: absolute;
				top: 50%;
				left: 28rpx;
				margin-top: -14rpx;
			}
		}

		.nar-bar {
			z-index: 1;
			height: 80rpx;
			width: 100%;
			background: #fff;
			.icon-fanhui {
				color: #333;
				font-size: 38rpx;
				margin-right: 35rpx;
			}

			.search-box {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0 28rpx;
				padding-top: 50rpx;
			}

			.search {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 422rpx;
				height: 66rpx;
				border: 1px solid #FFFFFF;
				opacity: 0.5;
				// background: rgba(52,58,66,.5);
				border-radius: 34rpx;

				input {
					width: 82%;
					height: 100%;
					color: #FFFFFF;
				}

				.icon-sousuo {
					color: #FFFFFF;
					margin-left: 28rpx;

				}
			}

			.tabs {
				width: 100%;
				// margin-top: 55rpx;
			}
		}

		.content {

			// padding: 40rpx 24rpx;
			.detail {
				padding: 10rpx 24rpx;

				.detail-content {
					background-color: #fff;
					padding: 30rpx 24rpx;
					position: relative;
					border-radius: 16rpx;

					.is_back {
						position: absolute;
						top: 0;
						right: 0;
						width: 90rpx;
						height: 36rpx;
						background-color: #E7AD14;
						border-radius: 0 16rpx 0 16rpx;
						font: 400 22rpx/36rpx PingFang SC;
						text-align: center;
						color: #fff;
					}

					.top {
						padding: 28rpx;
						background: #F8F8F8;
						border-radius: 8rpx;
						color: #505050;
						margin-bottom: 30rpx;

						.size {
							margin-bottom: 40rpx;
						}

						.right {
							display: flex;
							flex-direction: column;
							justify-content: flex-end;
							text-align: right;
							// align-items: right;
						}
						.t {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 36rpx;
							color: #A0A0A0;
						}

						.tr {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 36rpx;
							color: #A0A0A0;
							text-align: right;
						}
						
						// 申诉单
						.appeal{
							font: 500 24rpx/40rpx PingFang SC;
							color: #333;
							display: flex;
							text{
								color: #A0A0A0;
							}
						}

					}

					.product {
						position: relative;
						padding-bottom: 30rpx;
						display: flex;
						justify-content: space-between;
						.tag{
							display: flex;
							align-items: center;
							font: 500 24rpx/24rpx PingFang SC;
							color: #FFFFFF;
							text{
								background-color: #E7AD14;
								padding: 7rpx 9rpx;
								border-radius: 4rpx;
								margin-left: 12rpx;
							}
							.platform{
								background-color: #FD6260;
							}
						}
						// padding-top: 22rpx;
						.product-img {
							width: 84rpx;
							height: 84rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}

						.name {
							.name-top {
								font-size: 26rpx;
								font-weight: 500;
								line-height: 40rpx;
								color: #0A0605;
							}

							.phone {
								font-size: 26rpx;
								font-weight: 400;
								line-height: 40rpx;
								color: #505050;
							}
						}


					}

					.btn-box {
						&:after {
							display: block;
							clear: both;
							content: '';
							visibility: hidden;
							height: 0;
						}

						.more {
							float: left;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							color: #A0A0A0;
							padding-top: 10rpx;
						}

						.price-box {
							text-align: right;
							padding: 40rpx 0 22rpx 0;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 20rpx;
							color: #878787;

							.d-price {
								color: #dfb368;
								font-size: 32rpx;
								padding-left: 20rpx;
							}
						}

						.btn {
							// width: 50%;
							// float: right;
							display: flex;
							justify-content: flex-end;
							align-items: center;

							.btn-text {
								// width: 172rpx;
								padding: 0 25rpx;
								height: 64rpx;
								background: #FFFFFF;
								border: 2rpx solid #505050;
								opacity: 1;
								border-radius: 32rpx;
								text-align: center;
								line-height: 64rpx;
								color: #505050;
								font-size: 26rpx;
								margin-left: 20rpx;
								position: relative;
								.cell-service{
									position: absolute;
									right: 0;
									bottom: 0;
									left: 0;
									top: 0;
									opacity: 0;
									z-index: 10;
									.cell--bubble{
										width: 100%;
									}
								}
							}

							.active {
								background-color: #DBA954;
								color: #fff;
								border: 0;
							}
							.ssActive{
								font-size: 24rpx;
								margin-left: 18rpx;
								padding: 0 18rpx;
							}
						}

					}
				}
			}
		}
	}

	.df-ct {
		display: flex;
	}

	.g_icon {
		display: block;
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 44rpx;
		border-radius: 50%;
		line-height: 60rpx;
		text-align: center;
	}

	.gg {
		display: flex;

		view {

			flex: 1
		}
	}

	.listx {
		display: flex;
		height: calc(100% - 84px);
	}

	// 没有数据
	.notList{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 426rpx;
		image{
			width: 426rpx;
			height: 356rpx;
			margin-bottom: 40rpx;
		}
		font:500 40rpx/56rpx PingFang SC;
		color: #333;
	}
	.qrcodepop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		z-index: 9999;

		.qrcodecont {
			width: 400rpx;
			position: absolute;
			left: 50%;
			top: 25%;
			margin-left: -200rpx;

			.qrname {
				background: #fff;
				line-height: 80rpx;
				height: 440rpx;
				overflow: hidden;
				padding: 20rpx;
				text-align: center;
				border-radius: 15rpx;

				canvas {
					width: 300rpx;
					height: 300rpx;
					margin: auto;
				}
			}

			.icon-close {
				display: block;
				font-size: 60rpx;
				color: #fff;
				text-align: center;
				margin: 30rpx auto;
			}
		}
	}
// 顶部搜索框=====
	.container .i_top {
		position: relative;
		z-index: 999;
		background: #fff;
		.i_tCan {
			width: 100%;
			height: 66rpx;
			// padding-left: 32rpx;
			padding-right: 24rpx;
			/* #ifndef APP-PLUS-NVUE */
			// margin-left: 34rpx;
			width: 500rpx;
			/* #endif */
			flex: 1;
			/*#ifdef H5 || MP-WEIXIN*/
			width: 400rpx;
			/*#endif*/
		}
	
		.i_tBg {
			width: 100vw;
			height: 500rpx;
			background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);
			position: fixed;
			top: 0;
			left: 0;
		}
	
		.i_tInput {
			height: 66rpx;
			border-radius: 34rpx;
			background: #F6F7FB;
			position: relative;
			opacity: .8;
	
			&>input {
				width: 100%;
				height: 100%;
				font-size: 24rpx;
				padding-left: 72rpx;
			}
		}
	
		.i_tIcon {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			color: #6c6c6c;
			font-size: 32rpx;
			position: absolute;
			top: 18rpx;
			left: 32rpx;
		}
	}
// 客服弹框
		.pouchat{
			position: fixed;
			background: rgba(0,0,0,0.5);
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			.poucont{
				position: absolute;
				top:30%;
				left: 15%;
				right: 15%;
				.icon-close{
					width: 80rpx;
					height: 80rpx;
					font-size: 70rpx;
					color: #fff;
					line-height: 80rpx;
					text-align: center;
					margin: 30rpx auto;
				}
			}
			.chatlist{
				background: #fff;
				padding:30rpx;
				border-radius: 10rpx;
			}
			.chatml{
				position: relative;
				padding: 20rpx;
				padding-left: 100rpx;
				min-height: 100rpx;
				.cell-service{
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					top: 0;
					opacity: 0;
					z-index: 10;
					.cell--bubble{
						width: 100%;
					}
				}
				text{
					display: block;
					line-height: 40rpx;
				}
				.t1{
					font-size: 32rpx;
				}
				.t2{
					font-size: 24rpx;
					color: #999;
				}
				image{
					width: 70rpx;
					height: 70rpx;
					position: absolute;
					left: 15rpx;
					top:25rpx;
				}
			}
		}		
</style>
